<template>
  <el-row :gutter="40" type="flex">
    <el-col :xs="10" :sm="12" :md="14" :lg="24">
      <el-col :xs="10" :sm="20" :md="18" :lg="8">
        <el-form
          :model="accountForm"
          :rules="rules"
          ref="accountFormRef"
          label-width="85px"
          label-position="right"
        >
          <!-- <el-form-item label="账 号" style="margin-bottom:0px">
            {{ real_name }}({{ mobile }})
          </el-form-item>
          <el-form-item label="企业/组织" style="margin-bottom:10px">
            {{ company }} {{ department }}
          </el-form-item> -->
          <el-form-item label="真实姓名" prop="realName">
            <el-input
              v-model="accountForm.realName"
              placeholder="2~24个字符,一个汉字为两个字符"
            ></el-input>
          </el-form-item>
          <el-form-item label="账号" prop="name">
            <el-input
              v-model="accountForm.name"
              placeholder="2~24个字符,一个汉字为两个字符"
            ></el-input>
          </el-form-item>
          <el-form-item label="邮 箱" prop="email">
            <el-input
              v-model="accountForm.email"
              placeholder="邮箱可以为空,一旦填写,必须合法"
            ></el-input>
          </el-form-item>
          <el-form-item label="性 别" prop="sex">
            <el-radio-group v-model="accountForm.sex">
              <el-radio :label="0">女</el-radio>
              <el-radio :label="1">男</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item>
            <el-button
              size="small"
              type="primary"
              @click="saveBaseInfo"
              :loading="btnLoading"
              >保存</el-button
            >
            <el-button size="small" @click="reset">重置</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-col>
  </el-row>
</template>

<script>
import { getUserInfo, updateUserInfo } from "@/api/member/index";
import {checkEmail} from "@/utils/common";
import Cookies from "js-cookie";
export default {
  data() {
    return {
      pageTitle: "修改资料",
      btnLoading: false,
      accountForm: {
        realName: "",
        name: "",
        email: "",
        sex: "",
      },
      rules: {
        realName: [
          { required: true, message: "请输入真实姓名", trigger: "blur" },
          { min: 2, max: 24, message: "请输入2-24个字符", trigger: "blur" },
        ],
        name: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          { min: 2, max: 24, message: "请输入2-24个字符", trigger: "blur" },
        ],
        email: [{ validator: checkEmail, trigger: ["blur", "change"] }],
      },
    };
  },
  created() {},
  mounted() {
    this.getUserInfo();
  },

  methods: {
    // 获得用户信息
    getUserInfo() {
      this.userId = JSON.parse(Cookies.get("userInfo")).userId;
      getUserInfo({ id: this.userId }).then((res) => {
        this.accountForm = {
          realName: res.data.realName,
          name: res.data.name,
          email: res.data.email,
          sex: res.data.sex,
        };
        // 更改 localStorage中的值
        const newUserInfo = {
          ...JSON.parse(localStorage.getItem('localUserInfo')),
          name: res.data.name,
          realName: res.data.realName,
          email: res.data.email,
          sex: res.data.sex,
        };

        this.$store.commit("app/SET_LOCAL_USERINFO", JSON.stringify(newUserInfo));
      });
    },
    // 保存修改的信息
    saveBaseInfo() {
      this.$refs.accountFormRef.validate((valid) => {
        if (valid) {
          this.btnLoading = true;
          const data = {
            ...this.accountForm,
            id: this.userId,
          };
          updateUserInfo(data)
            .then((res) => {
              this.$message({
                message: "用户信息更新成功",
                type: "success",
              });
              this.btnLoading = false;
              this.getUserInfo();
            })
            .catch((err) => {
              this.btnLoading = false;
            });
        }
      });
    },
    // 重置表单
    reset() {
      this.$refs.accountFormRef.resetFields();
    },
  },
};
</script>

<style>
p.profile-info {
  padding-left: 20px;
  line-height: 30px;
  margin-bottom: 10px;
}
</style>
